<!doctype html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
</head>
<!-- https://www.cnblogs.com/liuhao-web/p/13184486.html -->

<body>
	<script>
		// TODO: 1. error 除了和window.onerror监听一样（错误信息还是不全），还可以监听资源加载错误,但是无法判断 HTTP 的状态是 404 还是其他比如 500
		window.addEventListener(
			'error',
			function (event) {
				console.log(event);
				event.preventDefault(); // 不会抛红色错误到控制台
				//过滤 错误类型
				// let target = event.target || event.srcElement;
				// let isElementTarget = target instanceof HTMLScriptElement
				//     || target instanceof HTMLLinkElement
				//     || target instanceof HTMLImageElement;
				// if (!isElementTarget) return false;
				// // 上报资源地址
				// let url = target.src || target.href;
				// console.log(url);
			},
			true
		);

		// TODO:  1.1 可以捕获 同步运行时错误 ✅
		// UndefVar // 此处未声明
		// throw '11111'

		// TODO:  1.2 可以捕获 异步运行时错误 ✅
		// setTimeout(function () {
		// 	console.log(obj);
		// });

		// TODO:  1.3 不能捕获到 语法错误 ❌
		// let name = 'Jack; // 少个单引号 输出： Uncaught SyntaxError: Invalid or unexpected token ，报错了，但是不能被onerror捕获

		// TODO:  1.4 不能捕获到 promise 内的错 ❌
		// new Promise((resolve, reject) => {
		//     console.log(obj); // promise 内的错误只能通过 promise 的错误捕获方法获取（ 可以通过  Promise.catch，或 window.addEventListener("unhandledrejection")
		//     resolve();
		// })

		// TODO:  1.5 可以捕获 网络请求的异常 ✅
		// let img = document.createElement('img')
		// img.src = 'http://www.xxx.png'
		// document.body.append(img)

		// TODO:  1.6 不能捕获 new Image() 的错误 ❌
		// new Image().src = 'http://www.xxx.png'

		// TODO:  1.7 不能捕获 fetch错误❌
		// fetch('https://tuia.cn/test') // fetch返回Promise可以通过  Promise.catch，或 window.addEventListener("unhandledrejection")
	</script>
</body>

</html>